<!--
 * @Author: IBOSS 2776641037@qq.com
 * @Date: 2025-08-04 11:22:55
 * @LastEditors: IBOSS 2776641037@qq.com
 * @LastEditTime: 2025-08-04 13:58:10
 * @FilePath: \nuxt-js\pages\weather\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <nuxt-link to="/" class="button--green">
      首页
    </nuxt-link>

    <div class="content">
      <div class="lottery-container">
        <h2 class="lottery-title">九宫格抽奖</h2>
        
        <!-- 九宫格抽奖区域 -->
        <div class="lottery-grid">
          <div 
            v-for="(item, index) in lotteryItems" 
            :key="index"
            :class="['lottery-item', { 'active': currentIndex === index, 'center': index === 4 }]"
            @click="startLottery"
          >
            <div class="item-content">
              <div v-if="index === 4" class="start-btn">
                <span>开始</span>
                <span>抽奖</span>
              </div>
              <div v-else class="prize-info">
                <div class="prize-icon">{{ item.icon }}</div>
                <div class="prize-name">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 抽奖结果弹窗 -->
        <div v-if="showResult" class="result-modal" @click="closeResult">
          <div class="result-content" @click.stop>
            <h3>恭喜您！</h3>
            <div class="result-prize">
              <div class="prize-icon">{{ currentPrize.icon }}</div>
              <div class="prize-name">{{ currentPrize.name }}</div>
            </div>
            <button class="confirm-btn" @click="closeResult">确定</button>
          </div>
        </div>

        <!-- 抽奖记录 -->
        <div class="lottery-history">
          <h3>抽奖记录</h3>
          <div class="history-list">
            <div v-for="(record, index) in lotteryHistory" :key="index" class="history-item">
              <span class="history-time">{{ record.time }}</span>
              <span class="history-prize">{{ record.prize }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

 
  </div>
</template>

<script>
export default {
  name: 'Weather',
  data() {
    return {
      lotteryItems: [
        { name: 'iPhone 15', icon: '📱', probability: 0.05 },
        { name: 'AirPods', icon: '🎧', probability: 0.1 },
        { name: '购物券', icon: '🎫', probability: 0.15 },
        { name: '谢谢参与', icon: '💔', probability: 0.2 },
        { name: '开始抽奖', icon: '🎯', probability: 0 }, // 中心按钮
        { name: '谢谢参与', icon: '💔', probability: 0.2 },
        { name: '购物券', icon: '🎫', probability: 0.15 },
        { name: 'AirPods', icon: '🎧', probability: 0.1 },
        { name: 'iPhone 15', icon: '📱', probability: 0.05 }
      ],
      currentIndex: -1,
      isRunning: false,
      showResult: false,
      currentPrize: {},
      lotteryHistory: [],
      timer: null
    }
  },
  methods: {
    startLottery() {
      if (this.isRunning) return
      
      this.isRunning = true
      this.currentIndex = 0
      
      // 随机选择中奖位置
      const randomIndex = Math.floor(Math.random() * 8)
      const targetIndex = randomIndex >= 4 ? randomIndex + 1 : randomIndex
      
      let step = 0
      const totalSteps = 20 + targetIndex // 至少转20圈
      
      this.timer = setInterval(() => {
        this.currentIndex = step % 8
        step++
        
        if (step >= totalSteps) {
          clearInterval(this.timer)
          this.currentIndex = targetIndex
          this.isRunning = false
          
          // 显示中奖结果
          setTimeout(() => {
            this.showLotteryResult(targetIndex)
          }, 500)
        }
      }, 100)
    },
    
    showLotteryResult(index) {
      this.currentPrize = this.lotteryItems[index]
      this.showResult = true
      
      // 添加到抽奖记录
      const now = new Date()
      const timeStr = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
      
      this.lotteryHistory.unshift({
        time: timeStr,
        prize: this.currentPrize.name
      })
      
      // 只保留最近10条记录
      if (this.lotteryHistory.length > 10) {
        this.lotteryHistory = this.lotteryHistory.slice(0, 10)
      }
    },
    
    closeResult() {
      this.showResult = false
      this.currentPrize = {}
    }
  },
  
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
.lottery-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.lottery-title {
  color: #333;
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: bold;
}

.lottery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 30px;
}

.lottery-item {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.lottery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.lottery-item.active {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(245, 87, 108, 0.6);
}

.lottery-item.center {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.item-content {
  color: white;
  text-align: center;
  font-weight: bold;
}

.start-btn {
  font-size: 18px;
  line-height: 1.2;
}

.start-btn span {
  display: block;
}

.prize-info {
  padding: 10px;
}

.prize-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.prize-name {
  font-size: 12px;
  line-height: 1.2;
}

.result-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.result-content {
  background: white;
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  max-width: 300px;
  width: 90%;
}

.result-content h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 24px;
}

.result-prize {
  margin-bottom: 25px;
}

.result-prize .prize-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.result-prize .prize-name {
  font-size: 18px;
  color: #666;
}

.confirm-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.lottery-history {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
}

.lottery-history h3 {
  color: #333;
  margin-bottom: 15px;
  font-size: 18px;
}

.history-list {
  max-height: 200px;
  overflow-y: auto;
}

.history-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.history-item:last-child {
  border-bottom: none;
}

.history-time {
  color: #666;
}

.history-prize {
  color: #333;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .lottery-container {
    padding: 10px;
  }
  
  .lottery-grid {
    gap: 5px;
  }
  
  .prize-name {
    font-size: 10px;
  }
  
  .start-btn {
    font-size: 16px;
  }
}
</style>
